<template>
  <div class="pageWrapper">
   <SearchBar @onSearch="handleSearch">
     <SearchBarItem label="支付流水号:" :labelLg="8">
       <Input type="text" v-model="dataModule.name" placeholder="请输入" clearable />
     </SearchBarItem>
     <SearchBarItem label="支付类型:" :labelLg="8">
       <Select v-model="dataModule.city" placeholder="请选择" :clearable="isClear">
         <Option :value="item.value" v-for="(item, key) in []" :key="key">{{item.label}}</Option>
       </Select>
     </SearchBarItem>
     <SearchBarItem label="支付状态:" :labelLg="8">
       <Select v-model="dataModule.city" placeholder="请选择" :clearable="isClear">
         <Option :value="item.value" v-for="(item, key) in []" :key="key">{{item.label}}</Option>
       </Select>
     </SearchBarItem>
     <SearchBarItem label="支付渠道订单号:" :labelLg="8">
       <Input type="text" v-model="dataModule.name" placeholder="请输入" clearable />
     </SearchBarItem>
     <SearchBarItem label="退款流水号:" :labelLg="8">
       <Input type="text" v-model="dataModule.name" placeholder="请输入" clearable />
     </SearchBarItem>
     <SearchBarItem label="退款状态:" :labelLg="8">
       <Select v-model="dataModule.city" placeholder="请选择" :clearable="isClear">
         <Option :value="item.value" v-for="(item, key) in []" :key="key">{{item.label}}</Option>
       </Select>
     </SearchBarItem>
     <SearchBarItem label="支付时间:" :labelLg="8">
       <DatePicker type="daterange" split-panels placeholder="请选择"></DatePicker>
     </SearchBarItem>
     <SearchBarItem label="退款时间:" :labelLg="8">
       <DatePicker type="daterange" split-panels placeholder="请选择"></DatePicker>
     </SearchBarItem>
     <SearchBarItem label="主订单号:" :labelLg="8">
       <Input type="text" v-model="dataModule.name" placeholder="请输入" clearable />
     </SearchBarItem>
   </SearchBar>
   <RemoteTable :namespace="namespace" :columns="columns" @onSortChange="onSortChange">
      <!-- <Button type="primary" icon="ios-search">查询</Button>
       <Button style="margin-left: 8px" icon="ios-undo" @click="resetForm">清空</Button> -->
   </RemoteTable>
  </div>
</template>

<script>
  import {
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card
  } from "view-design";
  import RemoteTable from "@/components/RemoteTable";
  import SearchBar from "@/components/SearchBar";
  import RemoteSelect from "@/components/RemoteSelect";
  import {
    namespace
  } from "../module";
  import Authc from "@/components/Authc";
  import Action from "./Action";
  import config from "@/utils/config";
  import appService from "@/utils/appService";
  export default {
    name: 'tables_page',
    components: {
      RemoteTable,
      SearchBar,
      SearchBarItem: SearchBar.SearchBarItem,
      RemoteSelect,
      Authc,
      Action,
      Button,
      Input,
      Modal,
      Message,
      Col,
      Row,
      Form,
      FormItem,
      DatePicker,
      Select,
      Option,
      Card
    },
    data() {
      return {
        requireUrl: '',
        namespace: namespace,
        isClear: true,
        loading: true,
        modal1: false,
        dataModule: {

        },
        tableData: [],
        columns: [{
            type: 'index',
            width: 60,
            align: 'center'
          }, {
            title: 'ID',
            key: 'name',
          },
          {
            title: '支付流水号',
            key: 'email',
          },
          {
            title: '主订单号',
            key: 'createTime',
          }, {
            title: '支付渠道侧订单号',
            key: 'name',
          },
          {
            title: '收单机构订单号',
            key: 'email',
          },
          {
            title: '交易类型',
            key: 'createTime',
          },
          {
            title: '订单名称',
            key: 'email',
          },
          {
            title: '订单应收总金额',
            key: 'createTime',
          }, {
            title: '通道费',
            key: 'name',
          },
          {
            title: '支付时间',
            key: 'email',
          },
          {
            title: '退款时间',
            key: 'createTime',
          },
          {
            title: '支付场景',
            key: 'createTime',
          },
          {
            title: "操作",
            key: "action",
            align: "center",
            permissions: ["invoice:taxpayer:detail"],
            width: 120,
            render: function(h, data) {
              return h(Action, {
                props: {
                  row: data.row
                }
              });
            }
          }
          // {
          //   title: '操作',
          //   key: 'handle',
          //   width: 160,
          //   options: ['delete', 'check', 'edit'],
          //   buttons: [
          //     (h, params, vm) => {
          //       return this.dealBtnsOPeration(h, params, vm)
          //     }
          //   ]
          // }
        ]
      }
    },
    methods: {
     handleSearch() {
       this.$store.dispatch(`${namespace}/query`, {
         limit: {
           currentPage: 1
         }
       });
     },
     onSortChange(sort) {
       if (sort.order === "normal") {
         this.queryParam.order = [];
       } else {
         this.queryParam.order = [sort.key + " " + sort.order];
       }
       this.handleSearch();
     },
     onSortChange(sort) {
       if (sort.order === "normal") {
         this.queryParam.order = [];
       } else {
         this.queryParam.order = [sort.key + " " + sort.order];
       }
       this.handleSearch();
     },
     resetForm() {
       this.$refs['formArea'].resetFields()
     }
    },
    async mounted() {
     
    }
  }
</script>

<style>

</style>
